import './E3.css';
import React from 'react';
import {AMapScene, LoadImage, PointLayer, LayerEvent} from '@antv/l7-react';
import airport1 from './images/flight1.svg'
import airport2 from './images/flight2.svg'
import airport3 from './images/flight3.svg'
import airport4 from './images/ic_flight.svg'
import airport5 from './images/flight5.svg'
import {Button, Drawer, input, Table, Tooltip} from 'antd';

class E3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:[],
            //航班前十
            dataTen:[],
            //ICAO
            dataICAO:[],
            //城市
            dataCity:[],
            //今天
            dataToday:[],
            //所有航班
            currentData:{},
            drawerVisible:false,
            drawerVisible1:false,
            drawerVisible2:false,
            drawerVisible3:false,
            drawerVisible4:false,
            searchValue:"",
            total:"",
            total1:"",
        }
    }
    componentWillUnmount() {
       // console.log("componentWillUnmount");
    }

    componentDidMount() {
        //console.log("componentDidMount");
        fetch('http://flightapi.xiexianbo.xin/airPort/listAll')
            .then(response => response.json())
            .then((data) => {
                this.setState({
                    data:data.data.data,
                });
            });
    }
    handleClick=(e)=>{
        this.setState({
            currentData:e.feature,
            drawerVisible: true,
        })

}
    show=()=>{
        var IATACode=this.state.currentData.IATACode||"";//IATA机场代码
        var aptCcity=this.state.currentData.aptCcity||"";//省份
        var aptCname=this.state.currentData.aptCname||"";//城市名称
        var flightNumber=this.state.currentData.flightNumber||"";//航班号
        var longitude=this.state.currentData.longitude||"";//经度
        var latitude=this.state.currentData.latitude||"";//维度

        alert("IATA机场代码: "+IATACode+'\n'
              +"省份: "+aptCcity+'\n'
              +"城市名称: "+aptCname+'\n'
              +"航班号: "+flightNumber+'\n'
              +"经度: "+longitude+'\n'
              +"维度: "+latitude+'\n',
    );
    }
    showTen=()=>{
        this.setState({
            drawerVisible1: true,
        })
        fetch('http://flightapi.xiexianbo.xin/airPort/getTopAP')
            .then(response => response.json())
            .then((data) => {
                this.setState({
                    dataTen:data.data.data,
                });
            });
    }
    GetNormal(url,params,str1){
        if (params) {
            let paramsArray = [];
            //拼接参数
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }
        //fetch请求
        fetch(url,{
            method: 'GET',
        })
            .then((response) => response.json())
            .then((json) => {
               // console.log('json'+JSON.stringify(json));
                //动态赋值
                if(str1=="ICAOCode") {
                    this.setState({
                        dataICAO: json.data.data
                    })
                }
                if(str1="searchCcity"){
                    this.setState({
                        dataCity: json.data.data,
                        total1:json.data.total
                    })
                }
                if(str1="today"){
                    this.setState({
                        dataToday: json.data.data,
                        total:json.data.total
                    })
                }
            })
            .catch((error) => {
                alert(error)
            })
    }
    findByICAOCode=()=>{

        this.setState({
            drawerVisible2: true,
        })
        var Url = 'http://flightapi.xiexianbo.xin/airPort/getICAOInfor';
        if(this.state.searchValue!="") {
            this.GetNormal(Url, {"ICAOCode": this.state.searchValue},"ICAOCode");
            console.log(this.state.searchValue);
            }
        var ss=JSON.stringify(this.state.dataICAO);
        console.log(ss);
        }

    findByCityName=()=>{
        this.setState({
            drawerVisible3: true,
        })
        var Url = 'http://flightapi.xiexianbo.xin/flight/getComAirNum';
        if(this.state.searchValue!="") {
            let a=[];
            a = this.state.searchValue.split(",");
           this.GetNormal(Url, {"searchCtry": a[0],"pageNo": a[1],"pageSize": a[2]},"searchCcity");
        }
        var ss=JSON.stringify(this.state.dataCity);
        console.log(ss);
    }
    findByDate=()=>{

        this.setState({
            drawerVisible4: true,
        })
        var Url = 'http://flightapi.xiexianbo.xin/flight/getFlightDateInfo';
        if(this.state.searchValue!="") {
            let a=[];
            a = this.state.searchValue.split(",");
            this.GetNormal(Url, {"pageNo": a[0],"pageSize": a[1]},"today");
        }
        var ss=JSON.stringify(this.state.dataToday);
        console.log(ss);

}
    handleDrawColse=()=>{
        this.setState({
            drawerVisible:false,
        })
    }
    handleDrawColse1=()=>{
        this.setState({
            drawerVisible1:false,
        })
    }
    handleDrawColse2=()=>{
    this.setState({
        drawerVisible2:false,
        })
    }
    handleDrawColse3=()=>{
        this.setState({
            drawerVisible3:false,
        })
    }
    handleDrawColse4=()=>{
        this.setState({
            drawerVisible4:false,
        })
    }
    handleChange=(e)=>{
        this.setState({
            searchValue:e.target.value,
        });
    }

    render() {
        const {drawerVisible}=this.state;
        const {currentData}=this.state;
        const {data=[]}=this.state;
        // [{"id":482,"ICAOCode":"VMMC","IATACode":"MFM","status":2,"aptCcity":"澳门","aptCity":"Macau","aptName":"Macau","aptCname":"澳门","flightNumber":183}]
        const columnsICAO = [
            {
                title: '航班编号',
                dataIndex: 'id',
                key: 'id',
            },
            {
                title: '机场ICAO号',
                dataIndex: 'ICAOCode',
                key: 'ICAOCode',
            },
            {
                title: '机场IATA号',
                dataIndex: 'IATACode',
                key: 'IATACode',
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
            },
            {
                title: '城市',
                dataIndex: 'aptCcity',
                key: 'aptCcity',
            },
            {
                title: '城市英译',
                dataIndex: 'aptCity',
                key: 'aptCity',
            },
            {
                title: '城市名称',
                dataIndex: 'aptCname',
                key: 'aptCname',
            },
            {
                title: '航班流量',
                dataIndex: 'flightNumber',
                key: 'flightNumber',
            },
        ];
        const columnsTen = [
            {
                title: 'IATA编码',
                dataIndex: 'IATACode',
                key: 'IATACode',
            },
            {
                title: '城市',
                dataIndex: 'aptCcity',
                key: 'aptCcity',
            },
            {
                title: '城市名称',
                dataIndex: 'aptCname',
                key: 'aptCname',
            },
            {
                title: '航班数',
                dataIndex: 'flightNumber',
                key: 'flightNumber',
            },
        ];
        const columnsCity = [
            {
                title: '航空公司名称',
                dataIndex: 'airCName',
                key: 'airCName',
            },
            {
                title: '航空公司编号',
                dataIndex: 'airNumber',
                key: 'airNumber',
            },

        ];
        const columnsToday = [
            {
                title: '飞行日期',
                dataIndex: 'flightDate',
                key: 'flightDate',
            },
            {
                title: '航班号',
                dataIndex: 'flightNum',
                key: 'flightNum',
            },

        ];
        return (
            <div className="Main">
                <AMapScene
                    map={{
                        center: [110.19382669582967, 50.258134],
                        pitch: 0,
                        style: 'dark',
                        zoom: 2,
                    }}
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                    }}
                >
                    <LoadImage name="00" url={airport1}/>
                    <LoadImage name="01" url={airport2}/>
                    <LoadImage name="02" url={airport3}/>
                    <LoadImage name="03" url={airport4}/>
                    <LoadImage name="04" url={airport5}/>
                    {data && (
                        <PointLayer
                            key={'2'}
                            options={{
                                autoFit: true,
                            }}
                            source={{
                                data,
                                parser: {
                                    type: 'json',
                                    x: 'longitude',
                                    y: 'latitude',
                                },
                            }}
                            shape={{
                                field: 'flightNumber',
                                values:(flightNumber)=> {
                                    if(flightNumber>=0&&flightNumber<100){
                                            return '00';
                                        }
                                            else if(flightNumber>=100&&flightNumber<200){
                                            return '01';
                                        }
                                            else if(flightNumber>=200&&flightNumber<500){
                                            return '02';
                                        }
                                            else if(flightNumber>=500&&flightNumber<1000){
                                            return '03';
                                        }
                                            else {
                                        return '04';
                                        }
                                            },
                            }}
                            size={{
                                values: 15,
                            }}
                            style={{
                                opacity: 1,
                            }}
                            active={{
                                option: {
                                    color: 'green',
                                },
                            }}
                        >
                            <LayerEvent type="click" handler={this.handleClick} />
                        </PointLayer>
                    )}
                </AMapScene>
                <Drawer title="查看机场信息框" placement="right" onClose={this.handleDrawColse} visible={drawerVisible}>
                     <div>
                     <Button className="buttonGood" style={{height:50}} onClick={this.show}>本机场信息</Button>
                     </div>
                     <Button className="buttonGood" style={{height:50},{marginTop:"40px"}} onClick={this.showTen}>前十机场信息</Button>
                        <Drawer title="查看前十机场信息框" placement="right" onClose={this.handleDrawColse1} visible={this.state.drawerVisible1}>
                                  <Table dataSource={this.state.dataTen} columns={columnsTen} />;
                        </Drawer>
                     <div>输入信息查找机场</div>
                     <input  id="inPutk" value={this.state.searchValue} placeholder={"请按对应按钮查找"} style={{height:50}} onChange={this.handleChange}/>
                     <div>
                      <Tooltip placement="topLeft" title="根据机场的ICAOCode查找机场信息（输入参数格式（ICAO码）">
                         <Button  className="buttonGood" style={{height:50},{marginTop:"40px"}} onClick={this.findByICAOCode}>ICAOCode</Button>
                          <Drawer title="机场信息" placement="right" onClose={this.handleDrawColse2} visible={this.state.drawerVisible2}>
                                  <Table dataSource={this.state.dataICAO} columns={columnsICAO} />;
                          </Drawer>
                      </Tooltip>
                     </div>
                     <div>
                      <Tooltip placement="topLeft" title="分页查询所有公司的航班数量（输入参数格式（国家简称，页数，每页显示条数））">
                        <Button  className="buttonGood" style={{height:50},{marginTop:"40px"}} onClick={this.findByCityName}>城市航班流量查询</Button>
                          <Drawer title="信息" placement="right" onClose={this.handleDrawColse3} visible={this.state.drawerVisible3}>
                                  <Table dataSource={this.state.dataCity} columns={columnsCity} />
                              <p>航班公司总数为: {this.state.total1}</p>
                          </Drawer>
                      </Tooltip>
                     </div>
                      <Tooltip placement="topLeft" title="每日航班统计（输入参数格式（页数，每页显示条数））">
                       <Button className="buttonGood" style={{height:50},{marginTop:"40px"}} onClick={this.findByDate}>每日航班统计</Button>
                          <Drawer title="信息" placement="right" onClose={this.handleDrawColse4} visible={this.state.drawerVisible4}>
                              <Table dataSource={this.state.dataToday} columns={columnsToday} />
                               <p>航班总数为: {this.state.total}</p>
                          </Drawer>
                      </Tooltip>

                </Drawer>
            </div>
        )
    }
}

export default E3;